<template>
  <!-- api日志-->
  <div>
    <div class="row-header">
      <el-form :inline="true" label-width="50px">
        <el-form-item label=" ">
          <el-input v-model.trim="cardNumber" placeholder="请输入业务号码" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-select v-model="flag" placeholder="请选择状态" style="width: 300px">
            <el-option value="" key="0" label="请选择状态"></el-option>
            <el-option value="true" key="1" label="成功"></el-option>
            <el-option value="false" key="2" label="失败"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" icon="el-icon-search" @click=" findList">查询</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table :data="tableData" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)" class="row-main-table"  :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }">
        <el-table-column prop="cardNumber" label="业务号码" align="center"></el-table-column>
        <el-table-column prop="chineseName" label="接口名" align="center"></el-table-column>
        <el-table-column prop="msg" label="消息" align="center"></el-table-column>
        <el-table-column prop="insertTime" label="调用时间" align="center"></el-table-column>
        <el-table-column prop="flag" label="状态" align="center">
          <template v-slot="{ row, rowIndex }">
            <div :style="{color:row.flag?'green':'red'}">{{row.flag?'请求成功！':'请求错误！'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="{ row, rowIndex }">
            <el-button type="primary"  @click="showDetail(row)" :loading="buttonRetryLoading" size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="row-main-pager"
        :current-page.sync="page.current"
        :page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        background></el-pagination>
    </div>
  </div>

</template>

<script>
  import {apiLogList} from '@/api/getData'

  export default {
    name: "oemTransOrder",
    data() {
      return {
        cardNumber: null,
        loading: false,
        tableLoading: false,
        flag: null,
        buttonRetryLoading: false,
        tableData: [],
        page: {
          current: 1,
          size: 10,
          total: 0
        }
      }
    },
    created() {
      this.findList()
    },
    methods: {
      findList() {
        this.loading = true;
        this.tableLoading = true;
        if (this.flag == '') {
          this.flag = null
        }
        if (this.cardNumber == '') {
          this.cardNumber = null
        }
        apiLogList({page: this.page, cardNumber: this.cardNumber, flag: this.flag}).then(response => {
          let ct = response.data.content;
          let res=ct.map(v => {
            v.insertTime = v.insertTime.replace("T"," ")
            return v
          })
          this.tableData=res
          this.page.total = response.data.totalElements
          this.loading = false
          this.tableLoading = false
        }).catch(e => {
          this.loading = false
          this.tableLoading = false
        })
      },
      handleCurrentChange(currentPage) {
        this.page.current = currentPage;
        this.findList()
      },
      handleSizeChange(pageSize){
        this.page.current = 1;
        this.page.size = pageSize;
        this.findList()
      },
      showDetail(row) {
        const h = this.$createElement;
        this.$msgbox({
          title: '查看详情',
          message: h('div', {style: "display:flex;flex-direction: column;white-space:pre-wrap;word-wrap : break-word ;"}, [
            h('span', null, '业务号码：' + row.cardNumber),
            h('span', null, '入参：' + row.participation),
            h('span', null, '回参：' + row.returnParameter),
            h('span', null, '错误堆栈信息：' + row.errorLog)

          ]),
          confirmButtonText: '确定',
          beforeClose: (action, instance, done) => {
            done();
          }
        }).then(action => {

        });
      }

    }
  }
</script>

<style scoped>

</style>
